<template>
	<view class="baseForm">
		<u-loading-page :loading="loading"></u-loading-page>
		<u-sticky>
			<view class="tab-bar">
				<u-tabs
					:list="list1"
					:current="activeTab"
					:scrollable="false"
					:activeStyle="{
						color: '#007aff',
						fontWeight: 'bold'
					}"
					lineWidth="24px"
					lineColor="#007aff"
					@click="changeTab"
				></u-tabs>
			</view>
		</u-sticky>
		<view v-if="!loading" class="overhidden">
			<view v-show="activeTab === 0" class="detail card">
				<view class="flex flex-col justify-between flex-1 h-full">
					<view class="record-content">
						<view class="record-item">
							<text>设备编号</text>
							<text>{{ taskInfo?.assetCode || '' }}</text>
						</view>
						<view class="record-item">
							<text>设备名称</text>
							<text>{{ taskInfo?.assetName || '' }}</text>
						</view>
						<view class="record-item">
							<text>设备类型</text>
							<text>{{ taskInfo?.assetTypeName || '' }}</text>
						</view>
						<view class="record-item">
							<text>设备状态</text>
							<text>{{ useDictionaryStore().filterDictName('EquipStatus', taskInfo?.assetStatus) || '' }}</text>
						</view>
						<view class="record-item">
							<text>设备类别</text>
							<text>{{ useDictionaryStore().filterDictName('EquipmentCategory', taskInfo?.measuringType) || '' }}</text>
						</view>
						<view v-if="taskInfo?.assetLifespan" class="record-item">
							<text>设备寿命</text>
							<text>{{ taskInfo?.assetLifespan || '' }}年</text>
						</view>
						<view v-if="taskInfo?.makerId" class="record-item">
							<text>制造工厂</text>
							<text>{{ taskInfo.makerCode }}{{ taskInfo.makerName ? '-' : '' }}{{ taskInfo?.makerName }}</text>
						</view>
						<view v-if="taskInfo?.assetModelId" class="record-item">
							<text>品牌型号</text>
							<text>{{ taskInfo?.assetBrandName }}{{ taskInfo?.assetBrandName ? '-' : '' }}{{ taskInfo?.assetModelNo }}</text>
						</view>
						<view v-if="taskInfo?.assetImportance != null" class="record-item">
							<text>资产重要性</text>
							<text>{{ useDictionaryStore().filterDictName('EquImportance', taskInfo?.assetImportance) || '' }}</text>
						</view>
						<view v-if="taskInfo?.totalPower" class="record-item">
							<text>额定功率(KW)</text>
							<text>{{ taskInfo?.totalPower || '' }}</text>
						</view>
						<view v-if="taskInfo?.powerAxis" class="record-item">
							<text>电源所在轴</text>
							<text>{{ taskInfo?.powerAxis || '' }}</text>
						</view>
						<view v-if="taskInfo?.fixedAssetCode" class="record-item">
							<text>固定资产编号</text>
							<text>{{ taskInfo?.fixedAssetCode || '' }}</text>
						</view>
						<view v-if="taskInfo?.originalValue" class="record-item">
							<text>资产原值</text>
							<text>{{ taskInfo?.originalValue || '' }}</text>
						</view>
						<view v-if="taskInfo?.residualValue" class="record-item">
							<text>资产折旧价值</text>
							<text>{{ taskInfo?.residualValue || '' }}</text>
						</view>
						<view v-if="taskInfo?.manufactureCode" class="record-item">
							<text>出厂编号</text>
							<text>{{ taskInfo?.manufactureCode || '' }}</text>
						</view>
						<view v-if="taskInfo?.assetQuantity" class="record-item">
							<text>数量</text>
							<text>
								{{ taskInfo.assetQuantity }}{{ taskInfo.assetQuantity ? useDictionaryStore().filterDictName('eamEquQuantity', taskInfo.quantityUnit) || '' : '' }}
							</text>
						</view>
						<view v-if="taskInfo?.assetSpecification" class="record-item">
							<text>规格</text>
							<text>{{ taskInfo?.assetSpecification || '' }}</text>
						</view>
						<view v-if="taskInfo?.arrivalDate" class="record-item">
							<text>到货日期</text>
							<text>{{ taskInfo?.arrivalDate.split(' ')[0] || '' }}</text>
						</view>
						<view v-if="taskInfo?.accountDate" class="record-item">
							<text>入账日期</text>
							<text>{{ taskInfo?.accountDate.split(' ')[0] || '' }}</text>
						</view>
						<view v-if="taskInfo?.remarks" class="record-item">
							<text>设备描述</text>
							<text>{{ taskInfo?.remarks || '' }}</text>
						</view>

						<!-- <view class="record-item" v-if="taskInfo?.assetPhotos && taskInfo?.assetPhotos.length">
							<text>图片/文档</text>
							<text style="text-decoration: underline" @click="previewImage">查看</text>
						</view> -->
					</view>
				</view>
			</view>

			<view v-show="activeTab === 1" class="detail card">
				<view class="flex flex-col justify-between flex-1 h-full">
					<view class="record-content">
						<view v-if="taskInfo?.manageDepartmentName" class="record-item">
							<text>管理部门</text>
							<text>{{ taskInfo?.manageDepartmentName || '' }}</text>
						</view>
						<view v-if="taskInfo?.assetManagerName" class="record-item">
							<text>管理人</text>
							<text>{{ taskInfo?.assetManagerName || '' }}</text>
						</view>
						<view v-if="taskInfo?.locationName" class="record-item">
							<text>设备位置</text>
							<text>{{ taskInfo?.locationName || '' }}</text>
						</view>
						<view v-if="taskInfo?.usingDepartmentName" class="record-item">
							<text>使用部门</text>
							<text>{{ taskInfo?.usingDepartmentName || '' }}</text>
						</view>
						<view v-if="taskInfo?.usingPersonName" class="record-item">
							<text>使用人</text>
							<text>{{ taskInfo?.usingPersonName || '' }}</text>
						</view>
						<view v-if="taskInfo?.usingDate" class="record-item">
							<text>使用日期</text>
							<text>{{ taskInfo?.usingDate.split(' ')[0] || '' }}</text>
						</view>
						<view v-if="taskInfo?.repairDepartmentName" class="record-item">
							<text>维修部门</text>
							<text>{{ taskInfo?.repairDepartmentName || '' }}</text>
						</view>
						<view v-if="taskInfo?.repairManagerName" class="record-item">
							<text>维修负责人</text>
							<text>{{ taskInfo?.repairManagerName || '' }}</text>
						</view>
						<view v-if="taskInfo?.installLocationExplain" class="record-item">
							<text>安装位置描述</text>
							<text>{{ taskInfo?.installLocationExplain || '' }}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="plan card record-content">
				<view class="title">计划中的高风险活动</view>
				<view class="">{{ taskInfo?.taskTypeNameList }}</view>
			</view> -->
			
			<view v-show="activeTab === 2" class="detail card">
				<view class="flex flex-col justify-between flex-1 h-full">
					<view class="record-content">
						<upload-image
							v-if="taskInfo?.assetPhotos"
							:multiple="false"
							:key="1"
							:keys="1"
							:list="taskInfo?.assetPhotos ?? []"
							:isRead="true"
						></upload-image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import { http } from '@/utils/http';
import { PageResult } from '@/types/type';
import { getSecondTime } from '@/utils/common';
import { useDictionaryStore } from '@/stores/useDictionaryStore';
import BaTreePicker from '@/components/ba-tree-picker/ba-tree-picker.vue';
import UploadImage from "@/components/upload-file-detail.vue";

const props = defineProps({
	assetId: {
		type: String,
		default: ''
	}
});

// 创建响应式数据
const list1 = reactive([{ name: '基本信息' }, { name: '维护信息' }, { name: '附件查看' }]);

// 定义方法
const activeTab = ref(0);
function changeTab(item) {
	activeTab.value = item.index;
}
// 是否折叠
const isCollapse = ref(false);

// 预览url前缀
const uploadApi = process.env.VITE_APP_UPLOAD_API;
const upPreviewUrl = `${uploadApi}/system/fileCenter/preview/`;

const taskInfo = ref();
const assetPhotos = ref([]);
const showIamge = ref(false);
const uAlbumRef = ref();
const loading = ref(false);
async function initPage() {
	try {
		loading.value = true;
		const result: any = await http({
			method: 'GET',
			url: `/eam/equAssetInfo/get/${props.assetId}`,
			data: {}
		}).finally(() => {
			loading.value = false;
			uni.stopPullDownRefresh();
		});
		taskInfo.value = result.data;

		// 获取预览图片
		const list = [];
		taskInfo.value.assetPhotos?.map((e) => {
			list.push(`${upPreviewUrl}${e.url}`);
		});
		assetPhotos.value = list;
	} catch (e) {
		console.log(e);
	}
}

function previewImage() {
	uAlbumRef.value.onPreviewTap();
}

// 列表定义
const tableList = ref([]);
const tableLoading = ref(false);
const current = ref(0);
const totalPage = ref(0);
const total = ref(0);

// 网页跳转
function jump(item, id, isRead) {
	uni.navigateTo({
		url: `/pages${item}?id=${id}&isRead=${isRead}`
	});
}

onPullDownRefresh(() => {
	initPage();
});

onShow(() => {
	tableList.value = [];
	current.value = 0;
	props.assetId && initPage();
});
</script>

<style lang="scss" scoped>
$primary-color: #16254e;
.flex-row {
	flex-direction: row;
}
.justify-right {
	justify-content: flex-end;
}
.history {
	width: calc(100% - 20px);
	.record-item {
		margin: 5px 0;
	}
}
.card {
	background-color: #fff;
	margin: 5px 10px;
	border-radius: 8px;
	padding: 12px 12px;
	transition: all 300ms ease;
}

uni-page-body {
	height: 100%;
	background-color: #f9f9fc;
}
:deep(.u-tabs__wrapper__nav) {
	background-color: #f9f9fc;
}

.baseForm {
	background-color: #f9f9fc;
	display: block;
}

.title {
	font-size: 16px;
	margin: 4px 0 10px;
	font-weight: bold;
}

.u-divider {
	margin: 5px 0;
}

.pb-10 {
	padding-bottom: 10px;
}
.input-box {
	// width: calc(100% - 56px);
	width: 100%;
	border: 0.5px solid #dadbde !important;
	border-radius: 4px;
	height: 32px;
	line-height: 32px;
	.u-input {
		pointer-events: none;
		height: 32px;
		line-height: 32px;
		padding-left: 10px !important;
	}
	image {
		padding: 6px 6px;
		width: 20px;
		height: 20px;
	}
}

.search-btn {
	width: 40px;
	height: 34px;
	margin-left: 6px;
	border-radius: 4px;
}
:deep(.u-empty__text) {
	margin-bottom: 30px;
}
</style>
